<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket Client</title>
  </head>
  <body>
    <h1>WebSocket Client</h1>

    <!-- 用户输入消息 -->
    <input type="text" id="messageInput" placeholder="Enter message" />

    <!-- 发送按钮 -->
    <button id="sendBtn">Send Message</button>
    <button id="retryBtn">retry Message</button>
    <button id="errorBtn">error Message</button>
    <!-- 显示消息 -->
    <div id="messages"></div>

    <script>
      // WebSocket连接
      const socket = new WebSocket("ws://localhost:3001/?id=client233");

      // 连接成功时的回调函数
      socket.onopen = () => {
        console.log("WebSocket connected");
        document.getElementById("messages").innerHTML +=
          "Connected to server<br>";
      };

      // 监听服务器返回的消息
      socket.onmessage = (event) => {
        console.log("Message from server: ", event.data);
        document.getElementById("messages").innerHTML +=
          "Server: " + event.data + "<br>";
      };

      // 处理WebSocket错误
      socket.onerror = (error) => {
        console.log("WebSocket error: ", error);
        document.getElementById("messages").innerHTML +=
          "Error: " + error.message + "<br>";
      };

      // 处理WebSocket连接关闭
      socket.onclose = () => {
        console.log("WebSocket connection closed");
        document.getElementById("messages").innerHTML +=
          "Connection closed<br>";
      };

      // 发送消息
      document.getElementById("sendBtn").addEventListener("click", () => {
        const message = document.getElementById("messageInput").value.trim();
        if (message) {
          // 创建一个消息对象
          const messageData = {
            type: "task-status", // 消息发送者
            status:'completed',
            message: message, // 用户输入的消息
            timestamp: new Date().toISOString(), // 消息发送时间
          };

          // 将消息对象转换为 JSON 字符串
          const jsonMessage = JSON.stringify(messageData);

          // 发送 JSON 格式的消息
          socket.send(jsonMessage);
          console.log("Sent to server: ", jsonMessage);

          // 显示在界面上
          document.getElementById("messages").innerHTML +=
            "You: " + message + "<br>";

          // 清空输入框
          document.getElementById("messageInput").value = "";
        } else {
          alert("Please enter a message to send.");
        }
      });
      document.getElementById("retryBtn").addEventListener("click", () => {
        const message = document.getElementById("messageInput").value.trim();
        if (message) {
          // 创建一个消息对象
          const messageData = {
            type: "task-status", // 消息发送者
            status:'retry',
            message: message, // 用户输入的消息
            timestamp: new Date().toISOString(), // 消息发送时间
          };

          // 将消息对象转换为 JSON 字符串
          const jsonMessage = JSON.stringify(messageData);

          // 发送 JSON 格式的消息
          socket.send(jsonMessage);
          console.log("Sent to server: ", jsonMessage);

          // 显示在界面上
          document.getElementById("messages").innerHTML +=
            "You: " + message + "<br>";

          // 清空输入框
          document.getElementById("messageInput").value = "";
        } else {
          alert("Please enter a message to send.");
        }
      });
      document.getElementById("errorBtn").addEventListener("click", () => {
        const message = document.getElementById("messageInput").value.trim();
        if (message) {
          // 创建一个消息对象
          const messageData = {
            type: "task-status", // 消息发送者
            status:'error',
            message: message, // 用户输入的消息
            timestamp: new Date().toISOString(), // 消息发送时间
          };

          // 将消息对象转换为 JSON 字符串
          const jsonMessage = JSON.stringify(messageData);

          // 发送 JSON 格式的消息
          socket.send(jsonMessage);
          console.log("Sent to server: ", jsonMessage);

          // 显示在界面上
          document.getElementById("messages").innerHTML +=
            "You: " + message + "<br>";

          // 清空输入框
          document.getElementById("messageInput").value = "";
        } else {
          alert("Please enter a message to send.");
        }
      });
    </script>
  </body>
</html>
